<template>
  <div class='container'>
    <el-carousel :interval="2000" height="700px">
    <el-carousel-item v-for="(item,index) in banners" :key="index">
     <div class="banner-image" 
      :style="`background:url(${$axios.defaults.baseURL}${item.url}) center center no-repeat;background-size:contain contain;`">
      </div>
    </el-carousel-item>
  </el-carousel>

  <div class='loginForm'>
    <el-tabs class="tabs" type="border-card">
      <!-- 登录表单 -->
  <el-tab-pane label="登录">
    <el-form ref="loginform" :model="loginform" :rules="rules">
  <el-form-item prop="username">
    <el-input v-model="loginform.username" @focus="handleclearMsg('username')" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item prop='password'>
    <el-input v-model="loginform.password" @focus="handleclearMsg('password')" type='password' placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleLogin">登录</el-button>
  </el-form-item>
</el-form>
  </el-tab-pane>
  <!-- 注册表单 -->
  <el-tab-pane label="注册">
     <el-form ref="registerform" :model="registerform" >
  <el-form-item>
    <el-input v-model="registerform.username" placeholder="请输入手机号或邮箱"></el-input>
  </el-form-item>
  <el-form-item class='auth'>
<el-input class='input' v-model="registerform.captcha" placeholder="请输入验证码"></el-input>
      <el-button class='button' type="info" plain @click="sendTel">发送验证码</el-button>
  </el-form-item>
  <el-form-item>
    <el-input v-model="registerform.nickname" placeholder="请输入昵称"></el-input>
  </el-form-item>
   <el-form-item>
    <el-input v-model="registerform.password" type='password' placeholder="请输入密码"></el-input>
  </el-form-item>
   <el-form-item>
    <el-input v-model="Confirm" type='password' placeholder="确认密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleRegister">注册</el-button>
  </el-form-item>
</el-form>
  </el-tab-pane>
</el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [],
      loginform: {
        username: '',
        password: ''
      },
      registerform: {
        username: '',
        password: '',
        nickname: '',
        captcha: ''
      },
      Confirm: '',
      // 表单验证属性是一个数组 里面可以有多个验证方法
      rules: {
        username: [
          {
            // 输入框里面没有数据就就触发
            required: true,
            // 认证失败提示信息
            message: '请输入号码',
            // 触发的条件
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getBanners()
  },
  methods: {
    // 获取轮播图背景图
    async getBanners() {
      const res = await this.$axios({
        url: '/scenics/banners',
        method: 'get'
      })
      // console.log(res.data)
      const { data } = res.data
      this.banners = data
    },
    // 输入框聚焦 清理认证失败提示
    handleclearMsg(error) {
      // 输入框失去焦点时如果没有数据就提示用户 但在聚焦时要把提示信息隐藏起来 有助于用户一体验
      // 调用组件方法
      this.$refs.loginform.clearValidate(error)
    },
    // 登录操作
    handleLogin() {
      // 发起登录请求前的表单验证
      // 表单验证里面有个方法可以用来校验数据 validate()
      // 里面传入一个回调函数 函数里面有两个参数 成功的参数 失败的参数
      // 他也可以用promise的方式来处理回调
      // this.$refs.form
      //   .validate()
      //   .then(res => {
      //     console.log(res)
      //   })
      //   .catch(error => {
      //     console.log(error)
      //   })
      this.$refs.loginform.validate((isValid, itemNotValid) => {
        // console.log(isValid)
        // console.log(itemNotValid)
        // return
        // 表单验证通过就该发送请求
        if (isValid) {
          // this.$axios({
          //   url: '/accounts/login',
          //   method: 'post',
          //   data: this.loginform
          // }).then(res => {
          //   // 登录页面不在需要使用本地来存储数据 用vuex 他可以被所有的组件全局使用
          //   this.$store.commit('user/setuserInfo', res.data)
          //   console.log(this.$store.state.user.userinfo)
          //   this.$message({
          //     message: '登录成功',
          //     type: 'success'
          //   })
          //   setTimeout(() => {
          //     this.$router.push({
          //       path: '/'
          //     })
          //   }, 1500)
          // })
          // 调用action方法
          this.$store.dispatch('user/login', this.loginform).then(res => {
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            setTimeout(() => {
              this.$router.push({
                path: '/'
              })
            }, 1500)
          })
        } else {
          console.log(itemNotValid)
        }
      })
      // return
    },
    // 用户注册
    handleRegister() {
      // 注册前判断
      if (this.registerform.password !== this.Confirm) {
        this.$message({
          message: '密码不一致',
          type: 'warning'
        })
        return
      }
      this.$axios({
        url: '/accounts/register',
        method: 'post',
        data: this.registerform
      }).then(res => {
        // console.log(res.data)
        this.$message({
          message: '注册成功',
          type: 'success'
        })
        setTimeout(() => {
          this.$router.push({
            path: '/'
          })
        }, 1500)
      })
    },
    // 获取验证码
    sendTel() {
      // 如果没有手机号码就不能发送验证码
      if (this.registerform.username === '') {
        this.$message({
          message: '请输入手机号',
          type: 'success'
        })
        return
      }
      this.$axios({
        url: '/captchas',
        method: 'post',
        data: {
          tel: this.registerform.username
        }
      }).then(res => {
        console.log(res.data)
        if (res.data.code) {
          this.$message({
            message: '验证码为' + res.data.code,
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;

  .banner-image {
    width: 100%;
    height: 100%;
  }
  .loginForm {
    width: 400px;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    bottom: 0;
    margin: auto;
    .el-button--primary {
      width: 370px;
    }
    ::v-deep.el-tabs__nav {
      width: 100%;
      display: flex;
      justify-content: center;
      .el-tabs__item {
        flex: 1;
        text-align: center;
      }
    }
    .auth {
      display: flex;
      justify-content: space-around;

      .input {
        width: 250px;
      }
    }
  }
}
</style>